<?php
    $time=time();
?>
<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=450, user-scalable=0">
        <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
        <title>全民飞机大战</title>
        <link rel="stylesheet" href="css/index.css?v=<?php echo $time; ?>">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    
    <body >
        <div id="app">
            <audio src="song/gamerover.mp3" id="gMsong"></audio>
            <!--<audio src="song/bgsong.mp3" autoplay="autoplay" loop="loop" id="bgSong"></audio>-->
            <audio src="song/enemyBz.mp3" id="bzSong"></audio>
            <audio src="song/bossBz.mp3" id="bzSong2"></audio>
            <audio src="song/ufo1.wav" id="sjSong"></audio>
            <div id="mark" >
                <div id="load">0%</div>
            </div>
            <div id="login" :class="{ hidden:!show_login}">
                <div id="loginbox" :class="{ hidden: login_type=='register' }">
                    <div class="title" >请登录</div>
                    <input type="text" placeholder="昵称" v-model="nickname"/>
                    <input type="text" placeholder="密码" v-model="pwd"/>
                    <div class="btn" @click="login">登录</div >
                    <div class="jump"  v-on:click="login_type = 'register'">注册</div >
                </div>
                <div id="registerbox" :class="{ hidden: login_type=='login' }">
                    <div class="title" >请注册</div>
                    <input type="text" placeholder="要注册昵称" v-model="nickname"/>
                    <input type="text" placeholder="设置密码" v-model="pwd"/>
                    <div  class="btn" @click="register">注册</div>
                    <div  class="jump" @click="login_type = 'login'">登录</div >
                </div>
            </div>
            <div id="rank" :class="{ hidden:!show_rank}">
                
                <div class="title">排行榜</div>
                <div class="close"  @click="close_rank">X</div>
                <div class="rankbox">
                    <div class="rank-item" v-for="(item,index) in rank" :key="item.id">
                        <div class="pai">{{index+1}}</div>
                        <div class="info">
                            <div class="in1">
                                <div class="nickname">{{item.nickname}}</div>
                                <div class="score">分数：{{item.score}}</div>
                                <div class="level">等级：{{item.level}}</div>
                            </div>
                         
                            <div class="time">{{item.time}}</div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <center>
                <canvas id="canvas"></canvas>
            </center>
        </div>
    <script type="text/javascript" src="js/api.js?v=<?php echo $time; ?>"></script>
    <script type="text/javascript" src="js/ziyuan.js"></script>
    <script>
        var name ='';
        var app = new Vue({
            el: '#app',
            data: {
                show_login:false,
                login_type:'login',
                
                show_rank:false,
                rank:[],
                nickname:'',
                pwd:'',
                
                message: 'Hello Vue!'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                register(){
                    let data = {nickname: this.nickname,pwd:this.pwd};
                    fetch(api.register, {
                      method: 'post',
                      credentials: 'include',
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                      },
                      body: http_builder_url(data)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if(data.code!=0){
                            alert(data.msg);
                            return;
                        }else{
                             name=data.data.nickname;
                            alert(data.msg);
                        }
                       
                    });
                },
                login(){
                    let data = {nickname: this.nickname,pwd:this.pwd};
                    fetch(api.login, {
                        credentials: 'include',
                      method: 'post',
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                      },
                      body: http_builder_url(data)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if(data.code!=0){
                            alert(data.msg);
                            return;
                        }else{
                            alert(data.msg);
                            name=data.data.nickname;
                            this.show_login=false;
                            afterload();
                        }
                       
                    });
                },
                close_rank(){
                    this.show_rank=false;
                }
            },
            
        })
        
         function http_builder_url( data) {
            
            if(typeof(data) == 'undefined' || data == null || typeof(data) != 'object') {
                return '';
            }
            url ="";
            for(var k in data) {
                url += ((url.indexOf("=") != -1) ? "&" : "") + k + "=" + encodeURI(data[k]);
                console.log(url);
            }
            return url;
        }
 
        var index = 0;
       
        var score = 0;
        var makeEnemyInterval = 200000000; //产生敌人飞机的速度

        var makebgsLastTime = 0;
        var makebgsInterval = 15360;

        var bullets = [];
        var ufos = [];

         //产生敌飞机子弹
        var eBullets = [];
        var makeEBsLastTime = 0;
        var makeEBsInterval = 1000;


         //产生ufo
        var makeUfoLastTime = 0;
        var makeUfoInterval = 5000;

         //产生敌飞机机
        var makeEnemyLastTime = 0;
        var makeEnemyInterval = 2000;

         //游戏状态
        var state = 0; //0开始状态 1运行状态 2结束状态
        </script>
        <script src="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>

        <script type="text/javascript" src="plugin/layer/layer.js"></script>
        <script type="text/javascript" src="js/obj.js?v=<?php echo $time; ?>"></script>
        <script type="text/javascript" src="js/script.js?v=<?php echo $time; ?>"></script>
        <script type="text/javascript" src="js/event.js?v=<?php echo $time; ?>"></script>
        <script type="text/javascript" src="js/scence.js?v=<?php echo $time; ?>"></script>
        
        
        
        <script type="text/javascript">
        
        var preLoadImgList=[];
        var hero_arr=[];
        var preLoadNum=1;
        var loadDom=document.getElementById('load');
    
        for(var i=0;i<imglist.length;i++){
            preLoadImgList[i]=new Image();
            preLoadImgList[i].src=imglist[i];
            preLoadImgList[i].onload = function() {
                preLoadNum++;
               // console.log(preLoadNum,imglist.length)
                loadDom.innerHTML=Math.floor(preLoadNum/imglist.length*100)+'%';
                if(preLoadNum>=imglist.length){
                    document.getElementById('mark').style.display="none";
                    fetch(api.is_login, {
                        credentials: 'include',
                        method: 'get',
                    })
                    .then(response => response.json())
                    .then(data => {
                        if(data.code!=0){
                            app.show_login=true;
                            return;
                        }else{
                             name=data.data.nickname;
                            afterload();
                        }
                       
                    });
                    
                    
                }
               
            }
        }
        
        
        document.addEventListener('touchmove', function (e) {
            e.preventDefault()
        }, false);
        var canvas = document.getElementById("canvas");
        
        var canvas_width = document.body.clientWidth ;
        var canvas_height = document.body.clientHeight ;
        
        canvas.width=canvas_width;
        canvas.height=canvas_height;
        var ctx = canvas.getContext("2d");
        
        
        var ws = new WebSocket("ws://129.204.63.215:8000");
        ws.onopen = function()
        {
            console.log('连接成功')
                 
        };
        ws.error = function(res)
        {
            console.log('连接失败',res)
                 
        };
         ws.onmessage = function (evt)
        {
            
            var received_msg = JSON.parse(evt.data);
      
            if(!received_msg){
                return;
            }
            console.log("数据已接收...",evt.data,received_msg);
            var data=received_msg.data;
            if(received_msg.type=='new'){
                hero1 = new Hero();
                hero1.init();
                hero1.x=data.x
                hero1.y=data.y
                hero1.name=data.name
                hero_arr.push(hero1);
            }else if(received_msg.type=='up'){
              
                hero1.x=data.x
                hero1.y=data.y
            }else if(received_msg.type=='close'){
              
                hero1=null;
         
            }
            
        };
        
        

        var gamer=null;
        
        var enemies = [];
        
        
        var level = 1;
        var bgs = [];
            bgs[0] = bg[index + 1];
            bgs[1] = bg[index];
             //创建元素
            var sky,logo,start_btn,rank_btn;
            
            var hero,hero1,pause_btn,bhq,view_score,view_life,view_level,btn_continue,btn_save,btn_end,view_end_score;
           
        function afterload(){
            
            // 场景一元素
            sky = new Sky();
            logo= new Logo();
            start_btn = new StartBtn();
            rank_btn = new RankBtn();
            
            
            // 场景二
            hero = new Hero();
            hero.type="loacl";
            hero.name=name;
            hero.init();
            hero_arr.push(hero)
           
            
            
            pause_btn = new PauseBtn();
            bhq = new Bhq(hero);
            
            view_score=new Score();
            view_life=new Life();
            view_level=new Level();
            view_pause=new PauseBtn();
            
            btn_continue=new ContinueBtn();
            btn_save=new SaveBtn();
            btn_end=new EndBtn();
            btn_gameagain=new GameAgainBtn();
            view_end_score=new EndScoreBtn();
            startGame();
            
        }
        
        
        </script>
    </body>

</html>